<!--
 * @Description: 订单管理模块
 * @Author: lucl
 * @Date: 2021-06-23 19:29:28
 * @LastEditors: Ronda
 * @LastEditTime: 2021-07-03 19:49:22
-->
<template>
  <div>
    <!-- {{Alldata}} -->
    <!-- 菜单栏 -->
    <div>
      <el-menu :default-active="defaultActive" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item v-for="item in activeIndex" :key="item.name" :index="item.name">{{ item.name }}</el-menu-item>
      </el-menu>
    </div>
    <!-- {{waiterId}}{{orderId}} -->
    <!-- 显示栏 -->
    <el-table v-loading="loading" :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="订单编号" width="180" />
      <el-table-column label="下单时间" width="180">
        <template slot-scope="scope">
          <div>{{ scope.row.orderTime | filteTime }}</div>
        </template>
      </el-table-column>
      <el-table-column label="总价">
        <template slot-scope="scope">
          <span style="font-size: 18px;">
            ￥<span style="color:red;width:30px;">{{ scope.row.total }}</span>元
          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='待派单'||scope.row.status==='待接单'" :type="scope.row.status==='待接单'?'success':'warning'">{{ scope.row.status }}</el-tag>
          <el-tag v-else type="info">{{ scope.row.status }}</el-tag>
          <!-- <el-tag v-else-if="scop.row.status=='待服务'" type="info">{{scope.row.status}}</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column prop="customerId" label="顾客ID" />
      <el-table-column prop="employeeId" label="员工ID" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="color:black" @click="handleClick(scope.row)">详情</el-button>
          <el-button v-if="scope.row.status==='待派单'" style="color:green;" type="text" size="small" @click="ChangStatus(scope.row)">派单</el-button>
          <!-- <el-button v-else-if="scope.row.status==='待服务'"  size="small" ></el-button> -->
          <div v-else-if="scope.row.status==='待服务'" size="small" />
          <el-button v-else-if="scope.row.status==='待接单'" type="text" style="color:orange;" size="small" @click="reject_order(scope.row)">取消派单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 模态框 -->
    <div>
      <el-dialog title="收货地址" :visible.sync="Visible">
        <el-radio v-for="item in staff.data.list" :key="item.id" v-model="waiterId" :label="item.id">{{ item.realname }}</el-radio>
        <!-- <el-radio v-model="radio" label="2">备选项</el-radio> -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="Visible = false">取 消</el-button>
          <el-button type="primary" @click="toPai">确 定</el-button>
        </div>
      </el-dialog>

    </div>
    <!-- 分页 -->
    <div>
      <div class="block">
        <!-- <span class="demonstration">完整功能</span> -->
        <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="zongshu" style="float:right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import Moment from 'moment'
import { pageQuery, baseUser_pageQuery, sendOrder, rejectOrder } from '@/api/order'
export default {
  filters: {
    filteTime(v) {
      return Moment(v).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  data() {
    return {
      loading: false,
      zongshu: 1,
      currentPage: 1,
      // 被选中的订单
      orderId: '',
      // 被选中的员工id
      waiterId: '',
      // 员工信息存放
      staff: {
        data: {
          list: ''
        }
      },
      params: {
        page: 1,
        pageSize: 10,
        status: ''
      },
      Visible: false,
      // 表格数组
      tableData: [],
      // 当前激活的index菜单
      defaultActive: '所有订单',
      activeIndex: [
        {
          name: '所有订单'
        },
        {
          name: '待支付'
        },
        {
          name: '待派单'
        },
        {
          name: '待接单'
        },
        {
          name: '待服务'
        },
        {
          name: '待确认'
        },
        {
          name: '已完成'
        }
      ]
    }
  },
  computed: {},
  created() {
    this.handleSelect()
  },
  mounted() { },
  methods: {
    handleCurrentChange(val) {
      this.params.page = val
      this.handleSelect()
      // console.log(`当前页: ${val}`);
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pageSize = val
      this.handleSelect()
    },
    async reject_order(res) {
      const a = {
        orderId: res.id
      }
      // console.log(res.id)
      const b = await rejectOrder(a)
      console.log(b)
      this.$notify.success({
        title: '成功',
        message: '成功取消派单'
      })
      this.handleSelect()
    },
    // 确定派单
    async toPai() {
      if (this.waiterId === '') {
        this.$notify.warning({
          title: '错误',
          message: '未选择派单员工'
        })
        this.Visible = false
      } else {
        const a = {
          waiterId: this.waiterId,
          orderId: this.orderId
        }
        // console.log(a.waiter+a.orderId)
        const res = await sendOrder(a)
        console.log(res)
        this.Visible = false
        this.$notify.success({
          title: '成功',
          message: '派单成功'

        })
        // console.log(res)
        this.handleSelect()
      }
    },

    // 更改订单状态弹出框
    async ChangStatus(res) {
      const yuangong = {
        page: 1,
        pageSize: 1000,
        roleId: 1
      }
      this.staff = await baseUser_pageQuery(yuangong)
      // console.log(res)
      this.orderId = res.id
      this.Visible = true

      // console.log(res)
    },
    // 订单详情
    handleClick(res) {
      this.$router.push({
        path: '/admin/order/Details',
        query: {
          cid: res.id
        }
      })
    },
    async handleSelect(key, keyPath) {
      this.loading = true
      // console.log(key,keyPath);
      if (key === '所有订单') {
        // 删除属性
        // console.log(1)
        // 遍历对象
        this.params.status = ''
        const temp = {
          ...this.params
        }
        for (const status in temp) {
          // key是属性名  temp[key]属性值
          // console.log(key,temp[key]);
          if (!temp[status]) {
            delete temp[status]
          }
        }
        const res = await pageQuery(temp)
        this.zongshu = res.data.total
        this.tableData = res.data.list
      } else {
        this.params.status = key
        // console.log(this.params)
        const res = await pageQuery(this.params)
        this.zongshu = res.data.total

        this.tableData = res.data.list
      }
      this.loading = false
    }
  }
}
</script>
<style scoped>
</style>
